<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>产品信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen"
	href="<%=request.getContextPath()%>/scripts/jqgrid/themes/sand/grid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="<%=request.getContextPath()%>/scripts/jqgrid/themes/jqModal.css" />
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jqgrid/jquery.js"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jqgrid/jquery.jqGrid.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/jqgrid/js/jqModal.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/jqgrid/js/jqDnR.js"
	type="text/javascript"></script>
<script language="javascript">
	 jQuery(document).ready(function(){ 
		 var lastsel2;
	     jQuery("#rowed5").jqGrid({
			 datatype: "local", 
				 height: 250, 
				 colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'], 
				 colModel:[
				 {name:'id',index:'id', width:90, sorttype:"int", editable: true}, 
				 {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
				 {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}}, 
				 {name:'ship',index:'ship', width:90, editable: true, edittype:"select", editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}}, {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} 
		         ], 
			    onSelectRow: function(id){
				 if(id && id!==lastsel2){
					 jQuery('#rowed5').restoreRow(lastsel2);
					 jQuery('#rowed5').editRow(id,true); lastsel2=id;
					 } 
					}, 
				imgpath: '<%=request.getContextPath()%>/scripts/jqgrid/themes/sand/images',   
				editurl: "server.php",
				caption: "Input Types" 
				});
				var mydata2 = [ 
						{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
						{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"}, 
						{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
						{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"}, 
						{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
						{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
						{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"}, {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
						{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"} 
				]; 

				for(var i=0;i < mydata2.length; i++){
					 jQuery('#rowed5').addRowData(mydata2[i].id,mydata2[i]); 
				}
			});
	</script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
<div id="pager" class="scroll" style="text-align: center;"></div>
</body>
</html>